<!-- 新增卡券 -->
<template>
	<view class="addcoupons">
		<view class="item">
			<text>卡包名称</text>
			<u-input v-model="value1" type="text" placeholder="请输入卡包名称" input-align="right" height="40"/>
		</view>
		<view class="item">
			<text>发行金额</text>
			<text class="gd">￥{{price}}</text>
		</view>
		<view class="item">
			<text>使用场景</text>
			<view class="r-right"  @click="opencj">
				<text>{{sycjText}}</text>
				<u-select v-model="cjshow" :list="list" @confirm="confirm"></u-select>
				<image src="../../../static/images/gengduo-b.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="item">
			<text>卡券分类</text>
			<view class="r-right"  @click="openkaquan">
				<text>{{kaquanText}}</text>
				<u-select v-model="kaquanshow" :list="kaquanlist" @confirm="kaquanconfirm"></u-select>
				<image src="../../../static/images/gengduo-b.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="item">
			<text>商户名称</text>
			<u-input v-model="value4" type="text" disabled="true" input-align="right" height="40"/>
		</view>
		<view class="item-loac">
			<view class="loaction">
				<text>商户位置</text>
				<view class="r-tit" @click="getlocation">
					<text>获取位置</text>
					<image src="../../../static/images/dinwei.png" mode="aspectFit"></image>
				</view>
			</view>
			<u-input v-model="value5" type="text" placeholder="请输入商家具体地址" input-align="right" height="40"/>
		</view>
		<view class="item-rl">
			<view class="item-calendar" @click="opencalendar">
				<text>使用时间</text>
				<text>{{xztime}}</text>
			</view>
			<u-calendar v-model="show" mode="range" @change="getdate" max-date="2500-1-1" :min-date="newDate"></u-calendar>
		</view>
		<view class="item">
			<text>卡券总量</text>
			<u-input v-model="total_num" type="number" placeholder="请输入卡券总数量" input-align="right" height="40"/>
		</view>
		<view class="item">
			<text>商户领取限额</text>
			<u-input @blur="shangjiaNum" v-model="value6" type="number" placeholder="请输入企业领取数量" input-align="right" height="40"/>
		</view>
		<view class="item">
			<text>个人领取限额</text>
			<u-input @blur="gerenNum" v-model="value7" type="number" placeholder="请输入个人领取数量" input-align="right" height="40"/>
		</view>
		<view class="item">
			<text>券留存数量</text>
			<u-input @blur="liucunNum" v-model="value8" type="number" placeholder="请输入留存数量" input-align="right" height="40"/>
		</view>
		<view class="item">
			<text>联系电话</text>
			<u-input v-model="value9" type="text" placeholder="请输入联系方式" input-align="right" height="40"/>
		</view>
		<view class="item-gz">
			<text>使用规则</text>
			<u-input class="gz-input" v-model="value10" type="textarea" placeholder="请输入优惠券具体使用规则" input-align="left" height="40"/>
		</view>
		<view class="item-upload">
			<p>优惠券封面图</p>
			<u-upload @on-success="fengmiantu" max-count="1" :action="action" :file-list="fileList" width="300" upload-text="点击上传封面图"></u-upload>
		</view>
		<view class="item-upload">
			<p>优惠券缩略图</p>
			<u-upload @on-success="suoluetu" max-count="1" :action="action" :file-list="fileList" width="300" upload-text="点击上传缩略图"></u-upload>
		</view>
		<view class="item-upload">
			<p>优惠券详情图</p>
			<u-upload @on-success="xiangqingtu" max-count="1" :action="action" :file-list="fileList" width="300" upload-text="点击上传详情图"></u-upload>
		</view>
		<view class="item-upload">
			<p>优惠券领取海报</p>
			<u-upload @on-success="haibaotu" max-count="1" :action="action" :file-list="fileList" width="300" upload-text="点击上传二维码海报"></u-upload>
		</view>
		<button class="submit" @click="judge(1)">提交审核</button>
		<button class="save" @click="judge(0)">保存</button>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import QQMapWX from "@/utils/qqmap-wx-jssdk.min.js"
	import {shareMixins} from '../../../mixins/share.js'
	export default {
		mixins:[shareMixins],
		data() {
			return {
				shareData: {
				    title: '空港卡券联盟商户端',
				    path: '/pages/mine/mine' // 分享的页面路径
				},
				shanghuData:'',
				value1:'',
				price:'0',
				// value2:'￥0',
				// value3:'',
				scene:'',
				cjshow:false,
				sycjText:'physical_store',
				province:'',//省
				city:'',//市
				area:'',//区	
				street:'',//街道	
				lat:'',//经度
				lng:'',//纬度
				list:[],
				kaquanlist:[],
				kaquanshow:false,
				kaquanText:'',
				value4:'',
				value5:'',
				show:false,
				xztime:'请选择使用时间',
				start_time:'',//开始时间  时间戳
				end_time:'',//结束时间 时间戳 	
				value6:'',
				value7:'',
				value8:'',
				value9:'',
				value10:'',
				type:'',
				total_num:'',
				// 演示地址，请勿直接使用
				action: 'https://ca.wupin.shop/api/common/uploadImage',//上传测试地址
				coupon_img_1:'',//封面图
				coupon_img_2:'',//缩略图	
				coupon_img_3:'',//详情图
				coupon_img_4:'',//海报图	
				status:'',
				newDate:''
			}
		},
		onShow(){
			this.newdate()
		},
		onLoad() {
			this.getCouponScene()
			this.getCouponTypes()
			this.shanghuData = uni.getStorageSync('shanghuData')
			this.value4 = this.shanghuData.company_name
		},
		methods: {
			getdate(e){//确定日期选择
				// console.log(e);
				var start_time = (Date.parse(new Date(e.startDate)).toString());
				var end_time = (Date.parse(new Date(e.endDate)).toString());
				start_time = start_time.substr(0,10);//精确到秒
				end_time = end_time.substr(0,10);//精确到秒
				this.start_time = start_time
				this.end_time = end_time
				console.log(this.start_time)
				console.log(this.end_time)
				this.xztime = e.startDate +' 至 '+ e.endDate
			},
			newdate(){//获取当前日期
				var date = new Date();
				var seperator1 = "-";
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				if (month >= 1 && month <= 9) {
				    month = "0" + month;
				}
				if (strDate >= 0 && strDate <= 9) {
				    strDate = "0" + strDate;
				}
				var currentdate = year + seperator1 + month + seperator1 + strDate;
				this.newDate = currentdate
			},
			judge(num){//判断是提交还是保存
				if(this.value1 == '' || this.price == '' || this.sycjText == '' || this.kaquanText == '' || this.value4 == ''
					|| this.xztime == '' || this.total_num == '' || this.value6 == '' || this.value7 == '' || this.value8 == '' || this.value9 == ''
					|| this.value10 == '' || this.coupon_img_1 == '' || this.coupon_img_2 == '' || this.coupon_img_3 == '' || this.coupon_img_4 == ''
					){
						this.$refs.uToast.show({
							title:'所有信息必填哦',
							type:'error'
						})
				}else if(num == 1){
					this.issueCoupon(1)//提交
				}else if(num == 0){
					this.issueCoupon(0)//保存
				}
			},
			async issueCoupon(status){//提交发行优惠券
				if(status == 1){
					this.status = 1
				}else{
					this.status = 0
				}
				// console.log(this.start_time)
				// console.log(this.end_time)
				var data = {
					name: this.value1,//卡券名称
					scene: this.scene,//场景
					province: this.province,//省	
					city: this.city,//市
					area: this.area,//区	
					street: this.street,//街道	
					address: this.value5,//详细地址
					lat: this.lat,//经度
					lng: this.lng,//纬度
					  //mytime是待转换时间字符串，格式：'2018-9-12 9:11:23'
					
					start_time: this.start_time,//开始时间  时间戳
					end_time: this.end_time,//结束时间 时间戳 	
					rule: this.value10,//规则
					// link_man: '',//联系人
					link_mobile: this.value9,//联系电话
					price: this.price,//价格
					total_num: this.total_num,//总数
					retained_num: this.value8,//留存数量
					person_num: this.value7,//每人领取限额
					company_num: this.value6,//商户领取限额	
					coupon_img_1: this.coupon_img_1,//封面图
					coupon_img_2: this.coupon_img_2,//缩略图	
					coupon_img_3: this.coupon_img_3,//详情图
					coupon_img_4: this.coupon_img_4,//海报图	
					type: this.type,//卡券分类	
					status:this.status,//卡券状态  不用传
				}
				
				const res = await this.$myRequest({
					url:'/api/businessCoupon/issueCoupon'+this.$u.queryParams(data),
					method:'POST'
				}).then((res) => {
					// console.log(this.status)
					if(res.data.code == 200 && this.status == 1){
						this.$refs.uToast.show({
							title:res.data.msg,
							type:'success'
						})
						console.log('提交方法成功')
						setTimeout(() => {
							uni.navigateBack({
								delta:1
							})
						},600)
					}else if(res.data.code != 200 && this.status == 1){
						this.$refs.uToast.show({
							title:res.data.msg,
							type:'error'
						})
					}else if(res.data.code == 200 && this.status == 0){
						this.$refs.uToast.show({
							title:res.data.msg,
							type:'success'
						})
						console.log('保存方法成功')
						setTimeout(() => {
							uni.navigateBack({
								delta:1
							})
						},600)
					}else if(res.data.code != 200 && this.status == 0){
						this.$refs.uToast.show({
							title:res.data.msg,
							type:'error'
						})
					}
				})
			},
			getlocation(){//获取定位地址
				uni.getLocation({
					type: 'wgs84',
					success:(res)=> {
						// console.log('进入uni.getLocation')
						let qqmapsdk = new QQMapWX({
							key: 'YEJBZ-J7ZKO-HLSWP-SVYG5-JLMMT-VZBSD'
						});
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success:(res)=> {
								// console.log(res.result)
								this.value5 = res.result.address
								this.province = res.result.address_component.province//省
								this.city = res.result.address_component.city//市
								this.area = res.result.address_component.district//区	
								this.street = res.result.address_component.street//街道	
								this.lat = res.result.location.lat//经度
								this.lng = res.result.location.lng//纬度
							},
						})
					}
				});
			},
			async getCouponScene(){//获取使用场景
				const res = await this.$myRequest({
					url:'/api/businessCoupon/getCouponScene'
				}).then((res) => {
					this.list = res.data.data
					this.sycjText = this.list[0].label
					this.scene = this.list[0].value
				})
			},
			opencj(){
				this.cjshow = true
			},
			confirm(e) { //确定使用场景
				if(this.list.length === 1){
					this.sycjText = e[0].label
					this.scene = e[0].value
				}
			},
			openkaquan(){//打开卡券分类
				this.kaquanshow = true
			},
			async getCouponTypes(){//获取卡券分类
				const res = await this.$myRequest({
					url:'/api/businessCoupon/getCouponTypes'
				}).then((res) => {
					// console.log(res.data.data);
					this.kaquanlist = res.data.data
					// console.log(this.kaquanlist[0].label);
					this.kaquanText = this.kaquanlist[0].label
					this.type = this.kaquanlist[0].value
				})
			},
			kaquanconfirm(e){//确定卡券类别
				if(this.kaquanlist.length === 1){
					this.kaquanText = e[0].label
					this.type = e[0].value
				}else{
					this.kaquanText = e[0].label
					this.type = e[0].value
				}
			},
			opencalendar(){//打开选择使用时间组件
				this.show = true
			},
			
			fengmiantu(e){//封面图上传成功
				this.coupon_img_1 = e.data.url
			},
			suoluetu(e){
				this.coupon_img_2 = e.data.url
			},
			xiangqingtu(e){
				this.coupon_img_3 = e.data.url
			},
			haibaotu(e){
				this.coupon_img_4 = e.data.url
			},
			shangjiaNum(){//商家限额
				let value6 = parseInt(this.value6)
				let total_num = parseInt(this.total_num)
				if(value6 > total_num){
					this.$refs.uToast.show({
						title:'商户领取限额不能大于总量',
						type:'waring'
					})
				}
			},
			gerenNum(){//个人限额
				let value7 = parseInt(this.value7)
				let total_num = parseInt(this.total_num)
				if(value7 > total_num){
					this.$refs.uToast.show({
						title:'个人领取限额不能大于总量',
						type:'waring'
					})
				}
			},
			liucunNum(){//留存限额
				let value8 = parseInt(this.value8)
				let total_num = parseInt(this.total_num)
				if(value8 > total_num){
					this.$refs.uToast.show({
						title:'留存限额不能大于总量',
						type:'waring'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.addcoupons{
		background: linear-gradient(#FFFBF6,#FFFFFF,#FFFFFF);
		padding: 0 32rpx 100rpx 32rpx;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 0;
			border-bottom: 1px solid #DFDFDF;
			.r-right{
				display: flex;
				align-items: center;
				text{
					font-size: 32rpx;
					color: #CCCCCC;
					margin-right: 20rpx;
				}
				image{
					width: 22rpx;
					height: 13rpx;
				}
			}
			.text{
				color: #333333;
				font-size: 32rpx;
			}
			.gd{
				color: #EC5F2F;
			}
			.r-tit{
				display: flex;
				align-items: center;
				image{
					width: 19rpx;
					height: 27rpx;
					margin-left: 30rpx;
				}
				text{
					color: #EC5F2F;
				}
			}
		}
		.item-loac{
			border-bottom: 1px solid #DFDFDF;
			padding-bottom: 16rpx;
			.loaction{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 0 0 0;
				
				.text{
					color: #333333;
					font-size: 32rpx;
				}
				.gd{
					color: #EC5F2F;
				}
				.r-tit{
					display: flex;
					align-items: center;
					image{
						width: 19rpx;
						height: 27rpx;
						margin-left: 30rpx;
					}
					text{
						color: #EC5F2F;
					}
				}
			}
		}
		.item-rl{
			border-bottom: 1px solid #DFDFDF;
			.item-calendar{
				padding: 30rpx 0;
				display: flex;
				justify-content: space-between;
				text:nth-child(2){
					font-size: 28rpx;
					color: #C3C4D4;
				}
			}
		}
		.item-gz{
			padding: 30rpx 0;
			border-bottom: 1px solid #DFDFDF;
			.gz-input{
				margin-top: 34rpx;
			}
		}
		.item-upload{
			margin-top: 40rpx;
			p{
				margin-bottom: 28rpx;
			}
		}
		.submit{
			border-radius: 100rpx;
			margin-top: 168rpx;
			padding: 0;
			font-size: 36rpx;
			color: #731400;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(#FFEED9,#FFE7CB,#FFDDB9);
		}
		.save{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 40rpx;
			border-radius: 100rpx;
			border: 1px solid #EC5F2F;
			color: #EC5F2F;
		}
	}
</style>
